<template>
    <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
    <div class="pane">
        <p @click="lineReplay">lineReplay</p>
        <p @click="markerReplay">markerReplay</p>
    </div>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import {ref} from "vue";

export default {
    name: "AddAnimatedLine.component",
    components: {Maptalks},
    setup() {

        let marker = ref(null), line = ref(null)
        let linePath = [
            [-0.131049, 51.498568],
            [-0.107049, 51.498568],
            [-0.107049, 51.491568]
        ];
        let offset = [
            [linePath[1][0] - linePath[0][0], linePath[1][1] - linePath[0][1]],
            [linePath[2][0] - linePath[1][0], linePath[2][1] - linePath[1][1]],
        ];
        /**
         * 播放marker动画
         */
        const markerReplay = () => {
            marker.value.setCoordinates(linePath[0]);
            marker.value.bringToFront().animate({
                //animation translate distance
                translate: offset[0]
            }, {
                duration: 2000,
                //let map focus on the marker
                focus: true
            }, function (frame) {
                if (frame.state.playState === "finished") {
                    console.log("marker 2 frame start");
                    // 这有点回调地狱的样子了呀，不好玩了
                    marker.value.bringToFront().animate({
                        translate: offset[1]
                    }, {
                        duration: 2000,
                        focus: true
                    }, function (frame) {
                        if (frame.state.playState === "finished") {
                            console.log("marker 2 frame finished");
                        }
                    })
                }
            });
        }

        /**
         * 播放line动画
         */
        const lineReplay = () => {
            line.value.hide();
            //line"s animateShow
            line.value.animateShow({
                duration: 1500,
                easing: "out"
            }, function (frame) {
                if (frame.state.playState === "finished") {
                    console.log("line finished");
                }
            });
        }


        let mapOnLoadCB = (map, mapUtil) => {
            mapUtil.setView(linePath)

            line.value = new maptalks.LineString(linePath, {
                visible: false,
                arrowStyle: "classic",
                arrowPlacement: "vertex-last",
                symbol: {
                    "lineColor": "#1bbc9b",
                    "lineWidth": 6
                }
            });
            marker.value = new maptalks.Marker(linePath[0]);

            new maptalks.VectorLayer(MapLayerConst.MAP_LINE_ANIMATION_LAYER).addGeometry(line.value, marker.value).addTo(map);

            lineReplay();

        };

        return {
            mapOnLoadCB,
            markerReplay,
            lineReplay
        }
    }
}
</script>

<style scoped lang="less">
.pane {
    background: #34495e;
    line-height: 28px;
    color: #fff;
    z-index: 10;
    position: absolute;
    top: 20px;
    right: 20px;
    p {
        cursor: pointer;
        display: block;
        color: #fff;
        text-align: left;
        padding: 0 10px;
        min-width: 28px;
        min-height: 28px;
        float: left
    }
}
</style>
